<!DOCTYPE HTML>
<html>
<head>
<title>Photo-Hub</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="css/style.css" rel='stylesheet' type='text/css' />
<link href="css/mystyle.css" rel='stylesheet' type='text/css' />
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script src="js/hander.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$(".search input[type='button']").click(function(){
			var value=$(this).prev().val();
			if(value.trim()!=''){
				$.ajax({
					url:"CenterController",
					data:{"operator":"search","key":value.trim()},
					dataType:"JSON",
					success:function(result){
							$('.grid_1').css("display","none");
							if(result.length==0){
								$(".stock_box").css("display","block");
								$(".pagination").css("display","none");
								$(".stock_box").html('<div>在该查询条件下，没有内容显示</div>').addClass('messageinfo');
								return;
							}else{
								$('.banner').css("display","none");
								$(".tab_img").html("");
								for (var i = 0; i < result.length; i++) {
									var $img=$("<img src='images/"+result[i].path+"' class='img-responsive' alt=''/>");
									var $p=$("<p>"+result[i].name+"</p>");
									var $h4=$("<h4>#"+result[i].praise+"</h4>");
									var $div=$("<div class='tab_desc'></div>");
									$div.append($p).append($h4);
									var $a=$("<a href='javascript:;'></a>");
									var $input=$("<input type='hidden' class='hidden' value='"+result[i].id+"'>");
									$a.append($img).append($input).append($div);
									var $li=$("<li></li>");
									$li.append($a);
									$(".tab_img").append($li);
								}
								if(result.length<36){
									$(".pagination").css("display","none");
								}
								$(".stock_box").css("display","block");
							}
					}
				});
			}
		});

		$("#next").click(function(){
			var page=getCookie("page");
			if(page=="1"){
				$("#prev").css("display","inline-block");
			}
			$.ajax({
				url:"CenterController",
				data:{"operator":"paging","page":parseInt(page)+1,"pageNum":getCookie("pageNum")},
				dataType:"JSON",
				success:function(result){
					var nowPage=getCookie("page");
					if(nowPage==getCookie("pageNum")){
						$("#next").css("display","none");
					}
					$(".stock_box").css("display","none");
					$(".tab_img").html("");
					for (var i = 0; i < result.length; i++) {
						var $img=$("<img src='images/"+result[i].path+"' class='img-responsive' alt=''/>");
						var $p=$("<p>"+result[i].name+"</p>");
						var $h4=$("<h4>#"+result[i].praise+"</h4>");
						var $div=$("<div class='tab_desc'></div>");
						$div.append($p).append($h4);
						var $a=$("<a href='javascript:;'></a>");
						var $input=$("<input type='hidden' class='hidden' value='"+result[i].id+"'>");
						$a.append($img).append($input).append($div);
						var $li=$("<li></li>");
						$li.append($a);
						$(".tab_img").append($li);
				}
				$(".stock_box").css("display","block");
				}
			});
		});

		$("#prev").click(function(){
			var page=getCookie("page");
			if(page==getCookie("pageNum")){
				$("#next").css("display","inline-block");
			}
			$.ajax({
				url:"CenterController",
				data:{"operator":"paging","page":parseInt(page)-1,"pageNum":getCookie("pageNum")},
				dataType:"JSON",
				success:function(result){
					var nowPage=getCookie("page");
					if(nowPage=="1"){
						$("#prev").css("display","none");
					}
					$(".stock_box").css("display","none");
					$(".tab_img").html("");
					for (var i = 0; i < result.length; i++) {
						var $img=$("<img src='images/"+result[i].path+"' class='img-responsive' alt=''/>");
						var $p=$("<p>"+result[i].name+"</p>");
						var $h4=$("<h4>#"+result[i].praise+"</h4>");
						var $div=$("<div class='tab_desc'></div>");
						$div.append($p).append($h4);
						var $a=$("<a href='javascript:;'></a>");
						var $input=$("<input type='hidden' class='hidden' value='"+result[i].id+"'>");
						$a.append($img).append($input).append($div);
						var $li=$("<li></li>");
						$li.append($a);
						$(".tab_img").append($li);
				}
				$(".stock_box").css("display","block");
				}
			});
		});
		
		
	});
</script>

</head>
<body>
	<div class="header">
      <div class="container">
  	     <div class="logo">
					<h1><a href="index.html">Photo Hub</a></h1>
		 		 </div>
			 <div class="top_right">
			   <ul class="top_right_main">
					<li><a href="register.html">Register</a></li>|
					<li class="login" onmouseover="showLogin()" onmouseout="hideLogin()" >
						 <div id="loginContainer"><a href="javascript:;" id="loginButton" ><span>Login</span></a>
							  <div id="loginBox">
								  <form id="loginForm">
					                <fieldset id="body">
					                	<fieldset>
					                          <label for="userName">userName</label>
					                          <input type="text" name="userName" id="userName">
					                    </fieldset>
					                    <fieldset>
					                            <label for="password">Password</label>
					                            <input type="password" name="password" id="password">
					                     </fieldset>
					                    <input type="button" id="login" value="Sign in">
					                	<label for="checkbox"><input type="checkbox" id="checkbox" checked=""> <i>Remember me</i></label>
					                	<div class="tip clr"></div>
					            	</fieldset>
					                 <span><a href="forgetPassword.html">Forgot your password?</a></span>
								   </form>
						      </div>
					      </div>
					  </li>
			   </ul>
				<script type="text/javascript">
							var value=getCookie('loginInfo');
							if(value.trim()!=""){
								$(".top_right_main").html("<li><a href='javascript:;' id='personal'>"+value+"</a></li>"
								+"<li><a href='javascript:;' id='exit'>Exit</a></li>");
								$(".top_right ul li a").css("text-transform","none");
							}
				</script>
			</div>
		  <div class="clearfix"></div>
		</div>
	</div>
	
	<div class="banner">
		<div class="container">
			<div class="span_1_of_1">
			    <h2>Photos, illustrations by<br> Creatives all over the world.</h2>
			    <div class="search">
			      	<ul class="nav1">
			          <li id="search">
									<form action="" method="get">
										<input type="text" name="search_text" id="search_text" placeholder="Search"/>
										<input type="button" name="search_button" id="search_button">
									</form>
							</li>
							<li id="">
								<a href="javascript:;">All Images</a>
							</li>
	        	</ul>
	      	</div>
			</div>
		</div>
	</div>
	<div class="grid_1">
		<h3>Over one Million Stock Images</h3>
		<div class="col-md-2 col_1 album" onclick="choose(this)">
			<h4>Gym</h4>
		</div>
		<div class="col-md-2 col_1">
			<img src="" class="img-responsive" alt=""/>
		</div>
		<div class="col-md-2 col_1">
			<img src="" class="img-responsive" alt=""/>
		</div>
		<div class="col-md-2 col_1">
			<img src="" class="img-responsive" alt=""/>
		</div>
		<div class="col-md-2 col_1">
			<img src="" class="img-responsive" alt=""/>
		</div>
		<div class="col-md-2 col_1">
			<img src="" class="img-responsive" alt=""/>
		</div>
		<div class="clr"></div>
		<div class="col-md-2 col_1 album"  onclick="choose(this)">
			<h4>Food</h4>
		</div>
		<div class="col-md-2 col_1">
			<img src="" class="img-responsive" alt=""/>
		</div>
		<div class="col-md-2 col_1">
			<img src="" class="img-responsive" alt=""/>
		</div>
		<div class="col-md-2 col_1">
			<img src="" class="img-responsive" alt=""/>
		</div>
		<div class="col-md-2 col_1">
			<img src="" class="img-responsive" alt=""/>
		</div>
		<div class="col-md-2 col_1">
			<img src="" class="img-responsive" alt=""/>
		</div>
		<div class="clr"></div>
		<div class="col-md-2 col_1 album" onclick="choose(this)">
			<h4>Wedding</h4>
		</div>
		<div class="col-md-2 col_1">
			<img src="" class="img-responsive" alt=""/>
		</div>
		<div class="col-md-2 col_1">
			<img src="" class="img-responsive" alt=""/>
		</div>
		<div class="col-md-2 col_1">
			<img src="" class="img-responsive" alt=""/>
		</div>
		<div class="col-md-2 col_1">
			<img src="" class="img-responsive" alt=""/>
		</div>
		<div class="col-md-2 col_1">
			<img src="" class="img-responsive" alt=""/>
		</div>
		<div class="clr"></div>
		<div class="col-md-2 col_1 album" onclick="choose(this)">
			<h4>People</h4>
		</div>
		<div class="col-md-2 col_1">
			<img src="" class="img-responsive" alt=""/>
		</div>
		<div class="col-md-2 col_1">
			<img src="" class="img-responsive" alt=""/>
		</div>
		<div class="col-md-2 col_1">
			<img src="" class="img-responsive" alt=""/>
		</div>
		<div class="col-md-2 col_1">
			<img src="" class="img-responsive" alt=""/>
		</div>
		<div class="col-md-2 col_1">
			<img src="" class="img-responsive" alt=""/>
		</div>
		<div class="clearfix"> </div>
		<script type="text/javascript">
			$.ajax(
				{
					url:"CenterController",
					type:"get",
					data:{'operator':'init','page':'index','part':'main'},
					dataType:"JSON",
					success:function(data){
						var j=0;
						for(var x in data){
							$(".album").eq(j).html($(".album").eq(j).html()+"<input type='hidden' value="+data[x][0].aid+">");
							$(".album h4").eq(j).html(x);
							for(var i=0;i<data[x].length;i++){
								$("img.img-responsive").eq(5*j+i).attr('src','images/'+data[x][i].path);
								$("img.img-responsive").eq(5*j+i).parent()
								.append($("<input type='hidden' value='"+data[x][i].id+"'>"));
							}
							j++;
						}
					}
				}
			);
		</script>
	</div>
	<div class="stock_box" style="display:none">
	 <div class="col-md-2 stock_left">
		   <div class="w_sidebar">
				<section class="sky-form">
				   <h4>Collections</h4>
					 <div class="col col-4">
						<label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i></i>All images</label>
					 </div>
					 <div class="col col-4">
					  <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Standard</label>
						<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Following</label>
						<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Lorem Ipsum</label>
						<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Injected humour</label>
						<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Default model </label>
					</div>
				</section>
				<section class="sky-form">
					<h4>Freshness</h4>
					<div class="col col-4">
						<label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i></i>Any time</label>
						<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Past 3 months</label>
						<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Past month</label>
					</div>
					<div class="col col-4">
						<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Past week</label>
						<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Past 3 days</label>
						<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Any time</label>
					</div>
				</section>
				<section class="sky-form">
					<h4>discount</h4>
					<div class="col col-4">
						<label class="radio"><input type="radio" name="radio" checked=""><i></i>60 % and above</label>
						<label class="radio"><input type="radio" name="radio"><i></i>50 % and above</label>
						<label class="radio"><input type="radio" name="radio"><i></i>40 % and above</label>
					</div><div class="col col-4">
						<label class="radio"><input type="radio" name="radio"><i></i>30 % and above</label>
						<label class="radio"><input type="radio" name="radio"><i></i>20 % and above</label>
						<label class="radio"><input type="radio" name="radio"><i></i>10 % and above</label>
					</div>
				</section>
	   	</div>
   </div>
   <div class="col-md-10 sap_tabs">
     <div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
			  <ul class="resp-tabs-list">
			  		<li>
			  		<div class="search">
							<ul class="nav1">
								<li id="search">
									<form action="" method="get">
										<input type="text" name="search_text" id="search_text" placeholder="Search"/>
										<input type="button" name="search_button" id="search_button">
									</form>
							</li>
						</ul>
					</div>
					</li>
				  <div class="clearfix"></div>
			  </ul>
				<div class="resp-tabs-container">
				   <div class="tab-1 resp-tab-content" style="display:block" aria-labelledby="tab_item-0">
						<ul class="tab_img">
						  <!-- <li>
								<input type="hidden" class="hidden" value="photo_id">
							<a href="javascript:void()">
								  <img src="photo_path" class="img-responsive" alt=""/>
							    <div class="tab_desc">
									 <p>photo_name</p>
									 <h4>#praise</h4>
								  </div>
						   </a>
						 </li> -->
							<div class="clearfix"></div>
						</ul>
				   </div>
			  </div>
     </div>
     <ul class="pagination">
        <li id="prev" style="display:none;">
          <a href="javascript:;" >
            <span >«</span>
          </a>
        </li>
        <li id="next">
          <a href="javascript:;" >
            <span >»</span>
          </a>
        </li>
     </ul>
    </div>
     <div class="clearfix"> </div>
  </div>


	<div class="grid_2">
		<div class="container">
			<div class="col-md-3 col_2">
				<h3>Stock Photo<br>Categories</h3>
			</div>
			<div class="col-md-9 col_5">
				<div class="col_1_of_5 span_1_of_5">
					<ul class="list1">
					    <li>
					    <input type="hidden" value="1">
					    <a href="javascript:;">Abstract</a>
					    </li>
			            <li><input type="hidden" value="2"><a href="javascript:;">Animals/Wildlife</a></li>
			            <li><input type="hidden" value="3"><a href="javascript:;">The Arts</a></li>
			            <li><input type="hidden" value="4"><a href="javascript:;">Backgrounds/Textures</a></li>
			            <li><input type="hidden" value="5"><a href="javascript:;">Beauty/Fashion</a></li>
			            <li><input type="hidden" value="6"><a href="javascript:;">Buildings/Landmarks</a></li>
		            </ul>
				</div>
				<div class="col_1_of_5 span_1_of_5">
					<ul class="list1">
					    <li><input type="hidden" value="7"><a href="javascript:;">Business/Finance</a></li>
			            <li><input type="hidden" value="8"><a href="javascript:;">Celebrities</a></li>
			            <li><input type="hidden" value="9"><a href="javascript:;">Editorial</a></li>
			            <li><input type="hidden" value="10"><a href="javascript:;">Education</a></li>
			            <li><input type="hidden" value="11"><a href="javascript:;">Food and Drink</a></li>
			            <li><input type="hidden" value="12"><a href="javascript:;">Healthcare/Medical</a></li>
		            </ul>
				</div>
				<div class="col_1_of_5 span_1_of_5">
					<ul class="list1">
					    <li><input type="hidden" value="13"><a href="javascript:;">Holidays</a></li>
			            <li><input type="hidden" value="14"><a href="javascript:;">Illustrations/Clip-Art</a></li>
			            <li><input type="hidden" value="15"><a href="javascript:;">Industrial</a></li>
			            <li><input type="hidden" value="16"><a href="javascript:;">Interiors</a></li>
			            <li><input type="hidden" value="17"><a href="javascript:;">Miscellaneous</a></li>
			            <li><input type="hidden" value="18"><a href="javascript:;">Model Released Only</a></li>
		            </ul>
				</div>
				<div class="col_1_of_5 span_1_of_5">
					<ul class="list1">
					    <li><input type="hidden" value="19"><a href="javascript:;">Nature</a></li>
			            <li><input type="hidden" value="20"><a href="javascript:;">Objects</a></li>
			            <li><input type="hidden" value="21"><a href="javascript:;">Parks/Outdoor</a></li>
			            <li><input type="hidden" value="22"><a href="javascript:;">People</a></li>
			            <li><input type="hidden" value="23"><a href="javascript:;">Religion</a></li>
			            <li><input type="hidden" value="24"><a href="javascript:;">Science</a></li>
		            </ul>
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
	<script type="text/javascript">
		//处理下方的categroy
		$.ajax(
				{
					url:"CenterController",
					type:"get",
					data:{'operator':'init','page':'index','part':'categroy'},
					dataType:"JSON",
					success:function(data){
						for(var i=0;i<data.length;i++){
							var $li=$(".list1 li").eq(i);
							$li.attr('onclick','choose(this)');
							var $input=$(".list1 li input").eq(i);
							$input.attr('value',data[i].id);
							var $a=$(".list1 li a").eq(i);
							$a.attr("href","javascript:;");
							$a.html(data[i].name);
						}
					}
				}
			);
	</script>
	<div class="grid_3">
	  <div class="container">
	  	 <ul id="footer-links">
			<li><a href="#">Terms of Use</a></li>
			<li><a href="#">Royalty Free License</a></li>
			<li><a href="#">Extended License</a></li>
			<li><a href="#">Privacy</a></li>
			<li><a href="#">Support</a></li>
			<li><a href="#">About Us</a></li>
			<li><a href="#">FAQ</a></li>
			<li><a href="#">Categories</a></li>
         </ul>
         <p>Copyright © Photo-Hub. All Rights Reserved</p>
	  </div>
	</div>
  
</body>
</html>
